<template>
    <div class="all">
      <!--点击订单号的对话框-->
      <div v-if="orderInfo.length>0">

        <el-dialog
        title="订单详情"
        :visible.sync="dialogVisible"
        width="50%"
          :before-close="handleClose">
          <div style="padding: 10px" >

            <div style="width: 100%;height: 30px;background-color: #F4F4F5;margin: 10px;">
              <span style="color: grey;line-height: 30px;margin-left: 20px">订单信息</span>
            </div>

            <div style="margin: 20px; width: 500px">
              <div style="margin-bottom: 30px;">
                <!--左边-->
                <span style="font-size: 18px;font-weight: bold">用户编号:</span>
                <span style="line-height: 30px">{{orderInfo[0].user_num}}</span>
                <!--右边-->
                <span style="float:right;line-height: 30px;right: 100px;">{{orderInfo[0].order_time}}</span>
                <span style="float: right;font-size: 18px;font-weight: bold">注册时间:</span>
              </div>


              <div style="margin-bottom: 30px;">
                <!--左边-->
                <span style="font-size: 18px;font-weight: bold">课程名称:</span>
                <span style="line-height: 30px">{{orderInfo[0].course_name}}</span>
                <!--右边-->
                <span style="float: right;line-height: 30px;right: 100px;">{{orderInfo[0].t_name}}</span>
                <span style="float: right;font-size: 18px;font-weight: bold">讲师名称:</span>
              </div>


              <div style="margin-bottom: 30px;">
                <!--左边-->
                <span style="font-size: 18px;font-weight: bold">订单号:</span>
                <span style="line-height: 30px">{{orderInfo[0].order_number}}</span>
                <!--右边-->
                <span style="float: right;line-height: 30px;right: 100px;"></span>
                <span style="float: right;font-size: 18px;font-weight: bold">流水号:</span>
              </div>


              <div style="margin-bottom: 30px;">
                <!--左边-->
                <span style="font-size: 18px;font-weight: bold">交易类型:</span>
                <span style="line-height: 30px">线上支付</span>
                <!--右边-->
                <span style="float: right;line-height: 30px;right: 100px;">{{orderInfo[0].payment_time}}</span>
                <span style="float: right;font-size: 18px;font-weight: bold">支付时间:</span>
              </div>

              <div style="margin-bottom: 30px;">
                <!--左边-->
                <span style="font-size: 18px;font-weight: bold">客户备注:</span>
                <span style="line-height: 30px">{{orderInfo[0].remarks}}</span>
                <!--右边-->
                <span style="float: right;line-height: 30px;right: 100px;"></span>
                <span style="float: right;font-size: 18px;font-weight: bold">后台备注:</span>
              </div>

            </div>


            <div style="width: 100%;height: 30px;background-color: #F4F4F5;margin: 10px;">
              <span style="color: grey;line-height: 30px;margin-left: 20px">金额分成</span>
            </div>




            <div style="margin: 20px; width: 500px">
              <div style="margin-bottom: 10px;">
                <!--左边-->
                <span style="font-size: 18px;font-weight: bold">购买渠道:</span>
                <span style="line-height: 30px" v-if="orderInfo[0].payment_type == 1">PC端</span>
                <span style="line-height: 30px" v-else>移动端</span>
              </div>

            </div>

          </div>

          <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
        </el-dialog>
      </div>




      <!--单点 单元格讲师信息-->
      <div v-if="teainfo.length>0">
        <el-dialog
          title="讲师信息"
          :visible.sync="tInformation"
          width="50%"
          v-model="teainfo[0]"
          :before-close="handleClose">
          <!--第一张卡片-->
          <div style="padding: 10px" >

            <el-card class="box-card">
              <el-divider style="text-align: center">讲师个人信息</el-divider>
              <!--最左边-->
              <div style="width: 210px;float: left;">
                <span style="font-weight: bold;float: left">头像:</span>
                <img src="../../assets/teacherlogo.png" width="100px" height="100px"/>
                <br/><br/><br/>
                <span style="font-weight: bold;">手机号:</span>
                <span>{{teainfo[0].t_phone}}</span>
                <br/><br/><br/>
                <span style="font-weight: bold;">注册时间:</span>
                <span>{{teainfo[0].t_createtime}}</span>
                <br/><br/>
              </div>
              <!--中间-->
              <div style="width: 190px;float: left;margin-left: 40px;margin-top: 10px">
                <span style="font-weight: bold;float: left">讲师编号:</span>
                <span >{{teainfo[0].teacher_num}}</span>
                <br/><br/><br/><br/>
                <span style="font-weight: bold;">讲师名称:</span>
                <span >{{teainfo[0].t_name}}</span>
                <br/><br/><br/>
                <span style="font-weight: bold;">邮箱:</span>
                <span >{{teainfo[0].t_email}}</span>
                <br/><br/><br/>
                <span style="font-weight: bold;">状态:</span>
                <span v-if="teainfo[0].status=3">正常</span>
              </div>
              <!--最后-->
              <div style="width: 100px;float: left;margin-top: 100px;">
                <span style="font-weight: bold;float: left">职位:</span>
                <span >讲师</span>
              </div>
            </el-card>
          </div>
          <!--第二张卡片-->
          <div style="padding: 10px;margin-top: 20px;" >
            <el-card class="box-card">
              <el-divider style="text-align: center">简介</el-divider>
              <div v-html="twocard">
              </div>
            </el-card>
          </div>



          <!--第三张卡片-->
          <div style="padding: 10px" >

            <el-card class="box-card">

              <el-divider style="text-align: center">分成情况:</el-divider>
              <!--最左边-->
              <div style="width: 180px;float: left;">
                <span style="font-weight: bold;">讲师分成情况:</span>
                <span style="">{{teainfo[0].t_share}}%</span>
                <br/><br/><br/>
                <span style="font-weight: bold;">已提现金额:</span>
                <span style="">{{teainfo[0].use_withdrawn}}元</span>
                <br/><br/><br/>
                <span style="font-weight: bold;">银行卡号:</span>
                <span>{{teainfo[0].t_bankcard}}</span>
                <br/><br/><br/>
                <span style="font-weight: bold;float: left">开户姓名:</span>
                <span >{{teainfo[0].t_name}}</span>
              </div>
              <!--中间-->
              <div style="width: 180px;float: left;margin-left: 40px">
                <span style="font-weight: bold;float: left">累计总收入:</span>
                <span >{{teainfo[0].zongjine}}元</span>
                <br/><br/><br/>
                <span style="font-weight: bold;">可提现金额:</span>
                <span >{{teainfo[0].cash_withdrawn}}元</span>
                <br/><br/><br/>
                <span style="font-weight: bold;">银行名称:</span>
                <span >3a银行</span>
                <br/><br/><br/>
                <span style="font-weight: bold;">身份证号:</span>
                <span >{{teainfo[0].t_idcard}}</span>
                <br/><br/>
              </div>
              <!--最后-->
              <div style="width: 150px;float: left;margin-left: 30px;margin-top: 80px;">
                <span style="font-weight: bold;">冻结金额:</span>
                <span>{{teainfo[0].dongjie}}元</span>
                <br/><br/>
                <span style="font-weight: bold;">支付名称:</span>
                <span ></span>

              </div>
            </el-card>



          </div>
          <span slot="footer" class="dialog-footer">
    <el-button @click="tInformation = false">取 消</el-button>
    <el-button type="primary" @click="tInformation = false">确 定</el-button>
  </span>
        </el-dialog>
      </div>


      <!--form表单（模糊查询）-->

      <el-form :inline="true" :model="pageandlike" class="demo-form-inline">
        <el-form-item label="手机号:">
          <el-input v-model="pageandlike.phone" placeholder="手机号"></el-input>
        </el-form-item>

        <el-form-item label="课程名称:">
          <el-input v-model="pageandlike.kname" placeholder="课程名称"></el-input>
        </el-form-item>

        <el-form-item label="支付时间:">
          <el-date-picker
            v-model="pageandlike.paytime"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>




        <el-form-item label="订单状态:">
          <el-select v-model="pageandlike.orderstatus" placeholder="请选择订单状态">
            <el-option label="带支付" value="0"></el-option>
            <el-option label="支付成功" value="1"></el-option>
            <el-option label="支付失败" value="2"></el-option>
            <el-option label="已关闭" value="3"></el-option>
          </el-select>
        </el-form-item>
        <br/>

        <el-form-item label="订单编号:">
          <el-input v-model="pageandlike.ordernum" placeholder="订单编号" style="width: 192px"></el-input>
        </el-form-item>

        <el-form-item label="客户备注:">
          <el-input v-model="pageandlike.remarks" placeholder="客户备注"></el-input>
        </el-form-item>

        <el-form-item label="讲师名称:">
          <el-input v-model="pageandlike.tname" placeholder="讲师名称" style="width: 120px"></el-input>
        </el-form-item>

        <el-form-item label="购买渠道:">
          <el-select v-model="pageandlike.gmqd" placeholder="请选择订单状态" style="width: 150px">
            <el-option label="移动端" value="0"></el-option>
            <el-option label="PC端" value="1"></el-option>
          </el-select>
        </el-form-item>

        <!--<el-form-item label=":">-->
          <!--<el-select v-model="formInline.region" placeholder="请选择订单状态" style="width: 218px">-->
            <!--<el-option label="带支付" value="0"></el-option>-->
            <!--<el-option label="支付成功" value="1"></el-option>-->
            <!--<el-option label="支付失败" value="2"></el-option>-->
            <!--<el-option label="已关闭" value="3"></el-option>-->
          <!--</el-select>-->
        <!--</el-form-item>-->

        <br/>




        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>

      <!--@cell-click="column"-->
      <el-table
        :data="tableData"
        stripe
        @cell-click="column"
        style="width: 100%">
        <el-table-column
          prop="oid"
          label="序号">
        </el-table-column>

        <el-table-column
          prop="orderNumber"
          label="订单号">
          <!--<span>{{tableData.name}}</span>-->
        </el-table-column>

        <el-table-column
          prop="course.courseName"
          label="课程信息">
        </el-table-column>

        <el-table-column
          prop="teacher.tname"
          label="讲师信息">
        </el-table-column>

        <el-table-column
          prop="user.phone"
          label="用户信息">
        </el-table-column>

        <el-table-column
          prop="paymentType"
          :formatter="stateFormat"
          label="交易类型/渠道">
        </el-table-column>

        <el-table-column
          prop="actualAmount"
          label="支付价格">
        </el-table-column>

        <el-table-column
          prop="orderStatus"
          :formatter="statusFormat"
          label="订单状态/时间">
        </el-table-column>

        <el-table-column
          prop="remarks"
          label="客户备注">
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="success"
              @click="handleEdit(scope.row)" round disabled="true">备注</el-button>

          </template>
        </el-table-column>

      </el-table>

      <!--分页-->
      <div class="block" style="margin: auto;width: 100%;text-align: center">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageandlike.pageCurr"
          :page-sizes="[1, 2, 4, 8]"
          :page-size="pageandlike.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageandlike.pageTolte">
        </el-pagination>
      </div>



    </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs'
    export default {
        name: "CourseOrder",
      data() {
        return {
          //表格参数
          tableData: [],
          // form表单参数
          // formInline: {
          //   user: '',
          //   region: ''
          // },

          // 选择日期
          pickerOptions: {
            shortcuts: [{
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
              }
            }]
          },
          //日期的两个时间都赋值

          dialogVisible: false,
          orderInfo:[],
          tInformation: false,

          //分页参数
         pageandlike:{
           //每页显示几条
           pageSize: 2,

           pageTolte: 0,

           //当前页
           pageCurr: 1,
           value1: '',
           paytime: '',
           phone:'',
           kname:'',
           orderstatus:'',
           ordernum:'',
           remarks:'',
           tname:'',
           gmqd:''
         },

          // 讲师点开对话框的第二个卡片（简介）
          twocard:"广州市领课网络科技有限公司成立于2015年，由多名长期从事在线教育和互联网金融系统技术服务的行业精英共同创办。在互联网及大数据时代背景下，整合互联网技术及在线教育的优势，打造在线教育平台，为企业节省研发费用和时间，助力机构和讲师建立自己的在线教育品牌。旗下的产品有“领课教育云”、“领课教育系统”和“龙果支付系统”。" +
            "    教育云主要提供平台运营服务及对应的技术服务。\n" +
            "\n" +
            "    教育系统主要提供在线教育系统及对应的技术服务。\n" +
            "\n" +
            "    支付系统主要提供互联网聚合支付系统的销售及对应的技术服务。",
          teainfo:[]




        }
      },
      methods: {
        handleEdit(row) {
          alert(JSON.stringify(row));
        },
        //模糊查询的点击事件
        onSubmit() {
          //alert(JSON.stringify(this.pageandlike));
          this.findAlllist();
        },
        column(row,cell){
           if (cell.property=="orderNumber"){
             //订单的字段点击
             this.orderinformation(row.oid);

             this.dialogVisible=true;
             alert(JSON.stringify(row));
          }else if(cell.property=="teacher.tname"){
             //教师信息字段点击
              //alert(row.teacher.tid);
             this.findteacherinfo(row.teacher.tid);
             this.tInformation=true;
           }


        },
        findAlllist(){
          this.$axios.post("orderlist/aaa/course-order/findAll",qs.stringify(this.pageandlike)).then(r=>{
            //alert(JSON.stringify(r.data.obj));
            this.tableData=r.data.obj.records;
            this.pageandlike.pageTolte=r.data.obj.total;
          })
        },
        //根据条件判断显示值(支付方式)
        stateFormat(row, column) {
          if (row.paymentType == 0) {
            return '线上/移动端'
          } else  {
            return '线上/PC端'
          }
        },
        //根据条件判断显示状态
        statusFormat(row){
          if (row.orderStatus == 0) {
            return '待支付'
          }else if (row.orderStatus == 1) {
            return '已支付'
          }else if (row.orderStatus == 2) {
            return '取消支付'
          }else {
            return '已关闭'
          }
        },
        //关闭对话框
        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {});
        },
        //查询订单信息
        orderinformation(oid){
            this.$axios.get("orderlist/aaa/course-order/orderinfo/"+oid).then(r=>{
                this.orderInfo=r.data.obj;
            })
        },

        //分页的方法
        handleSizeChange(val) {
          this.pageandlike.pageSize=val;
          this.findAlllist();
          //console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          this.pageandlike.pageCurr=val;
          this.findAlllist();
          //console.log(`当前页: ${val}`);
        }
        //分页的方法end

        //查询教师的信息，并且根据分润表查询出来他分润信息
        ,
        findteacherinfo(tid){
          this.$axios.post("orderlist/aaa/teacher/teacherinfo/"+tid).then(r=>{
              this.teainfo=r.data.obj;
              //alert(JSON.stringify(this.teainfo));
          })
        }




      },
      created(){
          this.findAlllist();
      }

    }
</script>

<style scoped>
  .all{
    padding: 20px;
  }
  .box-card {
    width: 90%;
    margin: 20px;
  }

</style>
